<template>
    <div class="app-container">
      <div class="flex ju">
        <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
        <el-form-item label="日期" prop="date">
          <el-date-picker size="small" v-model="queryParams.date" type="date" @change="bindSelectDate" placeholder="请选择" />
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
  
      </el-form>

      <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['userManage:user:export']">导出</el-button>
      </div>
  
      
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="序号" align="center" type="index" width="60" />
        <el-table-column prop="deptName" label="收费站"/>
        <el-table-column prop="siteManager" label="站长" />
        <el-table-column prop="deputySiteManager" label="副站长" />
        <el-table-column prop="etcClerk" label="ETC营业员" />
        <el-table-column prop="businessHost" label="业务主办" />
        <el-table-column prop="partyCommitteeOfficer" label="党委干事" />
        <el-table-column prop="officeDirector" label="办公室主任" />
        <el-table-column prop="officeOfficer" label="办公干事" />
        <el-table-column prop="chef" label="厨师" />
        <el-table-column prop="driver" label="司机" />
        <el-table-column prop="safetyOfficer" label="安全员" />

        <el-table-column prop="tollCollector" label="收费员" />
        <el-table-column prop="tollTeamLeader" label="收费班长" />
        <el-table-column prop="overloadController" label="治超员" />
        <el-table-column prop="electrician" label="电工" />
        <el-table-column prop="monitorOperator" label="监控员" />
        <el-table-column prop="ticketingRoomDirector" label="票证室主任" />
        <el-table-column prop="auditor" label="稽核员" />
        <el-table-column prop="pipeworker" label="管道工" />
        <el-table-column prop="maintenanceWorker" label="维修员" />
        <el-table-column prop="comprehensiveCoordinator" label="综合协调" />
        <el-table-column prop="businessSupervisor" label="业务主管" />
      
      </el-table>
  
      <pagination v-show="total>0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
    </div>
  </template>
  
  
  <script setup>
  import { ref } from 'vue';
  import moment from 'moment'
  import {  getStatistics } from "@/api/charge/charge";
  const { proxy } = getCurrentInstance()
  const queryParams = ref({ "date": ''})
  
  const loading = ref(false)
  const tableData = ref([])
  const total=ref([])
  
  
  
  /** 查询列表 */
  function getList() {
    loading.value = true;
    getStatistics(queryParams.value).then(response => {
      tableData.value = response.data;
      total.value = response.total;
      loading.value = false;
    });
  }
  
  
  
  /** 搜索按钮操作 */
  function handleQuery() {
    getList()
  };
  /** 重置按钮操作 */
  function resetQuery() {
    queryParams.value = { "date": '' };
    proxy.resetForm("queryRef");
    init()
    getList();
  };
  
  /** 导出按钮操作 */
function handleExport() {
  proxy.download("/employee/exportPersonnelStatistics", {
    ...queryParams.value,
  }, `人员统计_${new Date().getTime()}.xlsx`);
};
  const bindSelectDate = (val) => {
    queryParams.value.date = moment(val).format('YYYY-MM-DD');
  }
  const init = () => {
    let startDate = moment().subtract(1, 'days').format("YYYY-MM-DD");
    queryParams.value.date = startDate;
  }
  
  init()
  getList()
  </script>
  
  <style scoped>
  .flex {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    justify-content: space-between;
  }
  
  .flex .label {
    color: #333;
    font-size: 14px;
  }
  
  </style>